<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="views/css/lib/chartist/chartist.min.css" rel="stylesheet">
<link href="views/css/lib/owl.carousel.min.css" rel="stylesheet" />
<link href="views/css/lib/owl.theme.default.min.css" rel="stylesheet" />
<link href="views/css/helper.css" rel="stylesheet">
<link href="views/css/style.css" rel="stylesheet">
<title>Insert title here</title>

</head>

<body>
	<!-- Bread crumb -->
	<div class="row page-titles">
		<div class="col-md-5 align-self-center">
			<h3 class="text-primary">Dashboard</h3>
		</div>
		<div class="col-md-7 align-self-center">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
				<li class="breadcrumb-item active">数据生成</li>
			</ol>
		</div>
	</div>
	<!-- End Bread crumb -->


	<!-- Container fluid  -->
	<div class="container-fluid">
		<!-- Start Page Content -->
		<div class="row">
			<div class="col-md-3">
				<div class="card bg-primary p-20">
					<div class="media widget-ten">
						<div class="media-left meida media-middle">
							<span><i class="ti-bag f-s-40"></i></span>
						</div>
						<div class="media-body media-text-right">
							<h2 class="color-white" id="generateRates">0</h2>
							<p class="m-b-0">数据生成速率</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card bg-pink p-20">
					<div class="media widget-ten">
						<div class="media-left meida media-middle">
							<span><i class="ti-comment f-s-40"></i></span>
						</div>
						<div class="media-body media-text-right">
							<h2 class="color-white" id="errorCounts">0</h2>
							<p class="m-b-0">错误账目数</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card bg-success p-20">
					<div class="media widget-ten">
						<div class="media-left meida media-middle">
							<span><i class="ti-vector f-s-40"></i></span>
						</div>
						<div class="media-body media-text-right">
							<h2 class="color-white">$27647</h2>
							<p class="m-b-0">Bounce Rate</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card bg-danger p-20">
					<div class="media widget-ten">
						<div class="media-left meida media-middle">
							<span><i class="ti-location-pin f-s-40"></i></span>
						</div>
						<div class="media-body media-text-right">
							<h2 class="color-white">0</h2>
							<p class="m-b-0">Total Visitor</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-6">
				<div class="card">
					<div class="card-title">
						<h4>Data Generate Rate</h4>
					</div>
					<div class="sales-chart">
						<div id="rate-chart" style="height: 350px"></div>
					</div>
				</div>
				<!-- /# card -->
			</div>
			<!-- /# column -->
			<div class="col-lg-6">
				<div class="card">
					<div class="card-title">
						<h4>坏账用户</h4>
					</div>
					<div class="card-body">
						<div class="table-responsive" style=" min-height:350px;overflow-y:auto;max-height:350px;" >
							<table class="table table-hover ">
								<thead>
									<tr>
										<th>QQ号</th>
										<th>金额</th>
										<th>时间</th>
									</tr>
								</thead>
								<tbody id = "error-accounts" >
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- /# row -->

		<!-- End PAge Content -->
	</div>
	<!-- End Container fluid  -->
	<script type="text/javascript" src="/rest/views/js/jquery.js"></script>
	<script src="/rest/views/js/highcharts.js"></script>


	<!-- <script type="text/javascript">
        window.onload = function () {
            //第一种调用方法，传递的是方法指针
            //setInterval(showMsg, 1000);
            //第二种调用方法
            var methodName = "errorWater()";    //注意这里使用了字符串，并且加了括号
            setInterval(methodName, 1000);   //加了双引号，表示里面是代码，会执行里面的代码类似于setInterval("alert('a')",1000),每隔1秒执行alert('a')
        }
      
        function errorWater() {
        	  $.ajax({
        	    url: '/rest/highEchart/getErrorWater',
        	    success: function(data) {
        	    	console.log(data.value)
        	  //  	var points = JSON.parse(point.value)
        	    	document.getElementById("error-accounts").innerHTML += "<tr> <td>"+data.value+"</td> <td>2,456</td> <td>00:02:36</td> </tr>"

        	    },
        	    cache: false
        	  });
        	} 
    </script> -->
<script type="text/javascript">

var chart = null; // 定义全局变量
$(document).ready(function() {
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'rate-chart',
      type: 'spline',
      events: {
        load: requestData // 图表加载完毕后执行的回调函数
      }
    },
    credits: {
		enabled:false,
    	text: 'dbiir',
    	href: 'http://iir.ruc.edu.cn'
	},
    title: {
      text: ''
    },
    xAxis: {
      type: 'datetime',
      tickPixelInterval: 150,
      maxZoom: 20 * 1000
    },
    yAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
      title: {
        text: '',
        margin: 80
      }
    },
    series: [{
      name: 'Volume Per Second',
      data: []
    }]
  });
});
 

/**
 * Ajax 请求数据接口，并通过 Highcharts 提供的函数进行动态更新
 * 接口调用完毕后间隔 1 s 继续调用本函数，以达到实时请求数据，实时更新的效果
 */
function requestData() {
	$.ajax({
		url: '/rest/highEchart/getNum',
		cache: false,
		success: function(point) {
		  	console.log(point.value)
			//  var points = JSON.parse(point.value)
		  	var x = (new Date()).getTime(), // 当前时间
			y = parseInt(point.value);	
		    var series = chart.series[0],
		    shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点
		
		    // 新增点操作
		    //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
		    chart.series[0].addPoint([x,y], true, shift);
		    document.getElementById("generateRates").innerHTML = point.value
		
		    // 一秒后继续调用本函数
		    setTimeout(requestData, 1000);
		  },
	  
	});
  
	$.ajax({
		url: '/rest/highEchart/getErrorWater',
		cache: false,
		success: function(data) {
			console.log(data.value)
			//  var points = JSON.parse(point.value)
			if(data.value != 'nothing'){
				var errorWater = data.value
				var ews = errorWater.split(",")
				document.getElementById("error-accounts").innerHTML += "<tr> <td>"+ews[2]+"</td> <td>"+ews[9]+"</td> <td>"+ews[11]+"</td> </tr>"
				document.getElementById("errorCounts").innerHTML = parseInt(document.getElementById("errorCounts").innerHTML)+1
			}
		}
	});
}

</script>


</body>
</html>